<template>
  <div>
    <!-- 控制弹层打开 -->
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <!-- 使用子组件 -->
    <ElTest />
    <el-test></el-test>
    <!-- el-dialog => 背后是个.vue格式文件
       1. 通过 :visible 传入boolean值控制组件显示 => :visible.sync="父变量" 里边可以修改父的变量
       注意：vue3.0不支持sync写法

 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      @open="open"
      @close="close"
      width="60%"
    >
      <!-- <el-dialog
      title="提示"
      :visible="dialogVisible"
      @update:visible="modPar"
      width="60%"
    > -->
      <!-- 弹层内容 -->
      <span>这是一段信息</span>
      <!-- <span slot="footer" class="dialog-footer"> -->
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </template>
      <!-- </span> -->
    </el-dialog>
  </div>
</template>

<script>
import ElTest from './test.vue'
export default {
  components: {
    ElTest
  },
  data () {
    return {
      // 控制弹层显示的变量（父）
      dialogVisible: false
    }
  },
  methods: {
    // 关闭之前执行执行
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          // 点击确定执行done方法关闭
          done()
        })
        .catch(_ => {
          // 点击取消
        })
    },
    open () {
      console.log('弹层打开了')
    },
    close () {
      console.log('弹层关闭了')
    },
    // 子改父
    modPar (show) {
      console.log('子组件传递过来的：', show)
      this.dialogVisible = show
    }
  }
}
</script>

<style lang="less" scoped>
</style>
